{% extends 'base_backend.html' %}
{% load static admin_static i18n %}
{% load zhongbao_admin_filtets %}

{% block header_tail %}
<link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
<link rel="stylesheet" href="{% static 'public/CodeMirror/lib/codemirror.css' %}">
<link rel="stylesheet" href="{% static 'public/CodeMirror/theme/lesser-dark.css' %}">
{% endblock header_tail %}

{% block section_content %}
<div>
    <div class="box-header with-border">
        <h3>
            {% if ttype != 'add' %}
            <span id="config_name">维护时间：{{ change_date }}</span>
            ------------
            维护前后3天数据量
            {% else %}
            <span>新增</span>
            ------------
            近3天数据量
            {% endif %}
        </h3>
    </div>
    <!-- form start -->
    <div class="box box-primary">
        <div class="box-body">
            <div class="box-footer">
                {% if ttype != 'add' %}
                <h3>修改前</h3>
                {% endif %}
                <table class="table table-striped">
                    <tr>
                        <th>日期</th>
                        <th>总采集量</th>
                        <th></th>
                        <th>采集时间差比</th>
                    </tr>
                    {% for delta_info in data_size_list_old %}
                    <tr class="chang_config_tr">
                        <td>{{ delta_info.date_str }}</td>
                        <td>{{ delta_info.total }}</td>
                        <td style="height:13px;width: 37%;">
                            <div style="float:right;height:10px">
                                <div class="exclude-detail-div"
                                     title="0-1分钟 , {{ delta_info.d1_percent }} , {{ delta_info.d1_cids }} "
                                     percent="{{ delta_info.d1_percent }}"
                                     style="width:{{ delta_info.d1_width }}px;height:97%;float:left;background-color:#073f01"></div>

                                <div class="exclude-detail-div"
                                     title="1-2分钟 , {{ delta_info.d2_percent }} , {{ delta_info.d2_cids }} "
                                     percent="{{ delta_info.d2_percent }}"
                                     style="width:{{ delta_info.d2_width }}px;height:97%;float:left;background-color:#075f01"></div>

                                <div class="exclude-detail-div"
                                     title="2-5分钟 , {{ delta_info.d3_percent }} , {{ delta_info.d3_cids }} "
                                     percent="{{ delta_info.d3_percent }}"
                                     style="width:{{ delta_info.d3_width }}px;height:97%;float:left;background-color:#07a001"></div>

                                <div class="exclude-detail-div"
                                     title="5-15分钟 , {{ delta_info.d4_percent }} , {{ delta_info.d4_cids }}"
                                     percent="{{ delta_info.d4_percent }}"
                                     style="width:{{ delta_info.d4_width }}px;float:left;height:97%;background-color:#0fc005"></div>

                                <div class="exclude-detail-div"
                                     title="15-30分钟 , {{ delta_info.d5_percent }} , {{ delta_info.d5_cids }} "
                                     percent="{{ delta_info.d5_percent }}"
                                     style="width:{{ delta_info.d5_width }}px;float:left;height:97%;background-color:#20e010"></div>
                            </div>
                        </td>
                        <td style="height:13px;width: 37%;">
                            <div style="float:left;height:10px">
                                <div class="exclude-detail-div"
                                     title="30-60分钟 , {{ delta_info.d6_percent }} , {{ delta_info.d6_cids }} "
                                     percent="{{ delta_info.d6_percent }}"
                                     style="width:{{ delta_info.d6_width }}px;float:left;height:97%;background-color:#b04020"></div>

                                <div class="exclude-detail-div"
                                     title="60-120分钟 , {{ delta_info.d7_percent }} , {{ delta_info.d7_cids }} "
                                     percent="{{ delta_info.d7_percent }}"
                                     style="width:{{ delta_info.d7_width }}px;float:left;height:97%;background-color:#800f05"></div>

                                <div class="exclude-detail-div"
                                     title="120-240分钟 , {{ delta_info.d8_percent }} , {{ delta_info.d8_cids }} "
                                     percent="{{ delta_info.d8_percent }}"
                                     style="width:{{ delta_info.d8_width }}px;float:left;height:97%;background-color:#5f0701"></div>

                                <div class="exclude-detail-div"
                                     title="超过240分钟 , {{ delta_info.d9_percent }} , {{ delta_info.d9_cids }} "
                                     percent="{{ delta_info.d9_percent }}"
                                     style="width:{{ delta_info.d9_width }}px;float:left;height:97%;background-color:#2f0000"></div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </table>
                {% if ttype != 'add' %}
                <h3>修改后</h3>
                <table class="table table-striped">
                    <tr>
                        <th>日期</th>
                        <th>总采集量</th>
                        <th></th>
                        <th>采集时间差比</th>
                    </tr>
                    {% for delta_info in data_size_list_new %}
                    <tr class="chang_config_tr">
                        <td>{{ delta_info.date_str }}</td>
                        <td>{{ delta_info.total }}</td>
                        <td style="height:13px;width: 37%;">
                            <div style="float:right;height:10px">
                                <div class="exclude-detail-div"
                                     title="0-1分钟 , {{ delta_info.d1_percent }} , {{ delta_info.d1_cids }} "
                                     percent="{{ delta_info.d1_percent }}"
                                     style="width:{{ delta_info.d1_width }}px;height:97%;float:left;background-color:#073f01"></div>

                                <div class="exclude-detail-div"
                                     title="1-2分钟 , {{ delta_info.d2_percent }} , {{ delta_info.d2_cids }} "
                                     percent="{{ delta_info.d2_percent }}"
                                     style="width:{{ delta_info.d2_width }}px;height:97%;float:left;background-color:#075f01"></div>

                                <div class="exclude-detail-div"
                                     title="2-5分钟 , {{ delta_info.d3_percent }} , {{ delta_info.d3_cids }} "
                                     percent="{{ delta_info.d3_percent }}"
                                     style="width:{{ delta_info.d3_width }}px;height:97%;float:left;background-color:#07a001"></div>

                                <div class="exclude-detail-div"
                                     title="5-15分钟 , {{ delta_info.d4_percent }} , {{ delta_info.d4_cids }}"
                                     percent="{{ delta_info.d4_percent }}"
                                     style="width:{{ delta_info.d4_width }}px;float:left;height:97%;background-color:#0fc005"></div>

                                <div class="exclude-detail-div"
                                     title="15-30分钟 , {{ delta_info.d5_percent }} , {{ delta_info.d5_cids }} "
                                     percent="{{ delta_info.d5_percent }}"
                                     style="width:{{ delta_info.d5_width }}px;float:left;height:97%;background-color:#20e010"></div>
                            </div>
                        </td>
                        <td style="height:13px;width: 37%;">
                            <div style="float:left;height:10px">
                                <div class="exclude-detail-div"
                                     title="30-60分钟 , {{ delta_info.d6_percent }} , {{ delta_info.d6_cids }} "
                                     percent="{{ delta_info.d6_percent }}"
                                     style="width:{{ delta_info.d6_width }}px;float:left;height:97%;background-color:#b04020"></div>

                                <div class="exclude-detail-div"
                                     title="60-120分钟 , {{ delta_info.d7_percent }} , {{ delta_info.d7_cids }} "
                                     percent="{{ delta_info.d7_percent }}"
                                     style="width:{{ delta_info.d7_width }}px;float:left;height:97%;background-color:#800f05"></div>

                                <div class="exclude-detail-div"
                                     title="120-240分钟 , {{ delta_info.d8_percent }} , {{ delta_info.d8_cids }} "
                                     percent="{{ delta_info.d8_percent }}"
                                     style="width:{{ delta_info.d8_width }}px;float:left;height:97%;background-color:#5f0701"></div>

                                <div class="exclude-detail-div"
                                     title="超过240分钟 , {{ delta_info.d9_percent }} , {{ delta_info.d9_cids }} "
                                     percent="{{ delta_info.d9_percent }}"
                                     style="width:{{ delta_info.d9_width }}px;float:left;height:97%;background-color:#2f0000"></div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </table>
                {% endif %}

            </div>
        </div>
    </div>
</div>
{% endblock section_content %}

{% block body_js %}
{{ block.super }}
<script>
    $.ajaxSetup({
        data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
    });
    var body = $('body');
    body.append("<pre><div id='DiffBox'></div></pre>");
    var DiffBox = $('#DiffBox');
    body.append("<div id='mask'></div>");

    $(document).ready(function () {

        $('.chang_config_tr').hover(function () {
                var note = $(this).find('.change_diff_a');
                note.removeClass('no-display');
            }, function () {
                var note = $(this).parent().find('.change_diff_a');
                note.addClass('no-display');
            }
        );
    });

    $('.change_diff_a').click(function () {
        DiffBox.children().remove();
        var next_tr = $(this).closest('tr').next();
        var w_height = $(window).height();
        var w_width = $(window).width();
        var wrapper = $('.wrapper');
        var v1 = $(this).parent().prev().text();
        var v2 = next_tr.find('.change_version').text();
        if (next_tr.length == 0) {
            v2 = 'none'
        }
        ;
        var name = $('#config_file_name').text();
        wrapper.css('z-index', 2);
        /*重要，z-index底层对照*/
        $.post({
            data: {'name': name, 'v1': v1, 'v2': v2},
            url: "{% url 'maintain:change_config_diff' %}",
            success: function (data, statusText, xmlHttpRequest) {
                $.each(data, function (index, item) {
                    var p_tag = $(document.createElement('p'));
                    p_tag.text(item);
                    DiffBox.append(p_tag);
                });
                $("#mask").addClass("mask").fadeIn();
                DiffBox.fadeIn();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(textStatus)
            },
            dataType: 'json'
        });
        return false
    });

    var mask = $('#mask');
    mask.click(function () {
        if (DiffBox.css('display') == 'block') {
            DiffBox.fadeOut();
            mask.fadeOut();
        }
    })


</script>

{% endblock body_js %}